<template>
  <el-table :data="sliceList" :default-sort="{ prop: 'date', order: 'descending' }" style="width: 100%" stripe>
    <el-table-column prop="date" label="Date" sortable width="250" :formatter="formatter1" />
    <el-table-column prop="name" label="Name" width="250" />
    <el-table-column prop="email" label="Email" width="300" />
    <el-table-column prop="role" label="Identity" :formatter="formatter2" />
    <el-table-column label="Operation" width="320" align="center">
      <template #default="{ row: { id } }">
        <div>
          <router-link :to="'/index/detail/'+ id" class="linkto"><el-button type="primary">详情</el-button></router-link>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]" :small="false" :disabled="false" :background="false" layout="total, sizes, prev, pager, next, jumper" :total="userList.length" />
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, toRef } from 'vue'
import { userInfoIn, initEmployeeData } from '@/type/userInfo'
import $http from '@/request/http'

const data = reactive(new initEmployeeData())
const formatter1 = (row: userInfoIn) => {
  const dt = new Date(row.date)
  let y = dt.getFullYear()
  let m = dt.getMonth() + 1
  let d = dt.getDate()
  //   let h = dt.getHours()
  //   let mm = dt.getMinutes()
  //   let s = dt.getSeconds()
  return `${y}-${m}-${d}`
}
const formatter2 = (row: userInfoIn) => {
  return row.role === 1 ? '管理员' : '员工'
}
//数据获取
onMounted(async () => {
  const { data: res } = await $http.get('api/employees')
  data.userList = res
})
let userList = toRef(data, 'userList')
//分页
const currentPage = ref<number>(1)
const pageSize = ref<number>(5)
let sliceList = computed(() => {
  return userList.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 30px;
}
.el-table {
  z-index: 0;
}
.linkto {
  color: #fff;
}
</style>
